<template>
	<el-card shadow="never" :header="$t('setting.pwd.password')">
		<el-alert :title="$t('setting.pwd.attention')" type="info" show-icon style="margin-bottom: 15px;"/>
		<el-form ref="form" :model="form" :rules="rules" label-width="180px" style="margin-top:20px;">
			<el-form-item :label="$t('setting.pwd.current')" prop="password_old">
				<el-input v-model="form.password_old" type="password" show-password :placeholder="$t('enter')"></el-input>
				<div class="el-form-item-msg">{{$t('setting.pwd.must')}}</div>
			</el-form-item>
			<el-form-item :label="$t('setting.pwd.new')" prop="password">
				<el-input v-model="form.password" type="password" show-password :placeholder="$t('enter')"></el-input>
				<sc-password-strength v-model="form.password"></sc-password-strength>
				<div class="el-form-item-msg">{{$t('setting.pwd.rule')}}</div>
			</el-form-item>
			<el-form-item :label="$t('setting.pwd.confirm')" prop="password_confirm">
				<el-input v-model="form.password_confirm" type="password" show-password :placeholder="$t('enterMore')"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="save">{{$t('setting.pwd.save')}}</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import scPasswordStrength from '@/components/scPasswordStrength'

	export default {
		components: {
			scPasswordStrength
		},
		data() {
			return {
				form: {
					password_old: "",
					password: "",
					password_confirm: ""
				},
				rules: {
					password_old: [
						{ required: true, message: this.$t('all.enter') + this.$t('setting.pwd.current')}
					],
					password: [
						{ required: true, message: this.$t('all.enter') + this.$t('setting.pwd.new')}
					],
					password_confirm: [
						{ required: true, message: this.$t('setting.pwd.enterMore') + this.$t('setting.pwd.new')},
						{validator: (rule, value, callback) => {
							if (value !== this.form.password) {
								callback(new Error(this.$t('setting.pwd.confirmError')));
							}else{
								callback();
							}
						}}
					]
				}
			}
		},
		methods: {
			save(){
				this.$refs.form.validate(valid => {
					if (valid) {
						this.editPassword()
					}else{
						return false
					}
				})
			},
			async editPassword(){
				var res = await this.$API.admin.user.editPassword.post(this.form);
				if(res.code == 1){
					this.$alert(this.$t('setting.pwd.successmsg'), this.$t('setting.pwd.success'), {
						type: 'success',
						center: true
					}).then(() => {
						this.$router.replace({
							path: '/login'
						})
					}).catch(() => {})
				}else{
					this.$message.error(res.message)
				}
			},
		}
	}
</script>

<style>
</style>
